<template>
  <div>
    <div style="margin:0px auto;padding:2px;" align="center" :class="size">
      <input type="file" multiple="multiple" id="fileInput" @change="onChangeHandler" />
      <label for="fileInput">上传</label>
    </div>
    <FileList
      :files="files"
      :apiUrl="apiUrl"
      :enableList="enableList"
      :size="size"
      :autoRemove="autoRemove"
      :removeDelay="removeDelay"
      :storeDir="storeDir"
      :storeType="storeType"
      :headers="headers"
      :chunkSize="chunkSize"
      ref="list"
    ></FileList>
  </div>
</template>
<script>
/* eslint-disable */
import _ from "underscore";
import FileList from "./filelist";
export default {
  name: "workerupload",
  components: {
    FileList: FileList
  },
  props: {
    apiUrl: { type: String, required: true },
    enableList: { type: Boolean, default: true },
    autoRemove: { type: Boolean, default: false },
    removeDelay: { type: Number, default: 2000 },
    size: { type: String, default: "small" },
    storeDir: { type: String, default: "/test" }, //surport user namespace dir->/FSROOT/userroot/userbucket/currentdir
    storeType: { type: String, default: "0" }, //LOCAL,HDFS,GRIDFS,S3,SWEEDFS
    headers: { type: Object },
    chunkSize: { type: Number, default: 4 * 1024 * 1024 }
  },
  data: function() {
    return {
      files: []
    };
  },
  created() {},
  mounted() {
    this.files = [];
    this.checkOptions();
  },
  computed: {},
  methods: {
    checkOptions() {
      if (
        this.storeDir.indexOf("/") < 0 ||
        this.storeDir.indexOf("/files") == 0 ||
        Number(this.storeType) < 0 ||
        Number(this.storeType) > 2 ||
        this.chunkSize < 128
      ) {
        this.error("请检查配置选项");
        return false;
      }
      return true;
    },
    onChangeHandler(evt) {
      evt.preventDefault();
      if (this.checkOptions()) {
        let _files =
          (evt.dataTransfer && evt.dataTransfer.files) || evt.target.files;
        for (let index = 0; index < _files.length; index++) {
          //判断是否存在
          if (
            _.some(this.files, function(item) {
              return item.name == _files[index].name;
            })
          ) {
            this.warn("已存在文件" + _files[index].name);
          } else {
            let item = {
              name: _files[index].name,
              data: _files[index],
              hash: "",
              upprogress: "0%",
              parseprogress: "0%",
              complete: ""
            };
            this.files.push(item);
            //触发增加文件事件
            this.$refs.list.$emit("addItem", item.name);
          }
        }
      }
    },
    error(msg) {
      if (this.$messagebox !== undefined) {
        this.$messagebox({
          content: msg,
          type: "error" //'success','warning','error'
        });
      } else {
        console.error(msg);
      }
    },
    warn(msg) {
      if (this.$messagebox !== undefined) {
        this.$messagebox({
          content: msg,
          type: "warning" //'success','warning','error'
        });
      } else {
        console.warn(msg);
      }
    }
  }
};
</script>
<style scoped>
input {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
div label {
  display: table;
  background-color: #409eff;
  border-color: #409eff;
  position: relative;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: white;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 500;
  text-align: center;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
}
div.mini label {
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 3px;
}
div.small label {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 3px;
}
div.medium label {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
}
</style>

